<!docType html>
<html>
<head>
	<meta charset="utf-8">
	<title>The Shape of css</title>
	<style type="text/css">

.clock{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #FFCCCC;
	position: relative;
}
.holdR{
	width: 200px;
	height: 200px;
	/*background-color: transparent;*/
	position: absolute;
	clip: rect(0 200px 200px 100px);
}
.pieR{
	width: 200px;
	height: 200px;
	background-color: #99ccff;
	border-radius: 50%;
	position: absolute;
	clip: rect(0 200px 200px 100px);
	/*-webkit-transform: rotate(90deg);*/
}

.holdL{
	width: 200px;
	height: 200px;
	/*background-color: transparent;*/
	position: absolute;
	clip: rect(0 100px 200px 0);
}

.pieL{
	width: 200px;
	height: 200px;
	background-color: #99ccff;
	border-radius: 50%;
	position: absolute;
	clip: rect(0 100px 200px 0);
	/*-webkit-transform: rotate(90deg);*/
}


.hole{
	position: absolute;
	top:20px;
	left:20px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background-color: #fff;
	z-index:99;
	box-shadow: inset 0 0 2px #ccc;
}

.hole .oo{
	position: absolute;
	font-size: 18px;
	top:60px;
	left:20px;
	display: none;
}

.hole .oo span{
	font-size: 30px;
	font-weight: bold;
	color:#FF6666;
}

.hole .xx{
	position: absolute;
	top:70px;
	left:10px;
	font-size: 16px;
	display: none;
}


	</style>
</head>

<body>

	<div class="clock">
		<div class="holdR">
			<div class="pieR"></div>
		</div>
		<div class="holdL">
			<div class="pieL"></div>
		</div>
		<div class="hole">
			<div class="xx">
				猪猪,你要减肥啦！
			</div>
			<div class="oo">你有<span></span>斤了</div>
		</div>
	</div>





	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">

/*var i = 0;
var j = 0;
var count = 0;
var tR = null;
var tL = null;

var startR = function(){
	i += 0.6 ;
	count += 1;
	if(count >= 300){
		clearInterval(tR);
		count = 0;
		tL = setInterval("startL()", 10);
	}
	$(".pieR").css("-webkit-transform", "rotate(" + i + "deg)");
}

var startL = function(){
	j += 0.6 ;
	count += 1;
	if(count >= 300){
		clearInterval(tL);
		count = 0;
		tR = setInterval("startR()", 10);
	}
	$(".pieL").css("-webkit-transform", "rotate(" + j + "deg)");
}

tR = setInterval("startR()",10);*/



var count = 0;
var obj = [$(".pieR"), $(".pieL")];
var degArr = [0.6, 0.6];
var index = 0;
var timer = setInterval(function(){
	count += 1;
	degArr[index] += 0.6;
	if(count >= 300){
		count = 0;
		index = (index + 1) % 2;
	}
	obj[index].css("-webkit-transform", "rotate(" + degArr[index] + "deg)");
}, 100);



/*var num = 100;
var weight = 100;
var timer = setInterval(function(){
	weight = weight + 0.5;
	$(".hole .oo span").text(weight);
	num = num + 1;
	if(num%2 === 0){

		$(".hole .oo").fadeIn("slow");
		$(".hole .oo").fadeOut("fast");

	}
	else{
		$(".hole .xx").fadeIn("slow");
		$(".hole .xx").fadeOut("fast");
	}

}, 1000);*/


	</script>
</body>

</html>